<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>layui-demo</title>
        <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
        <script src="layui/layui.js"></script>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    </head>

    <body>
        <form class="layui-form" style="padding: 20px;">
            <div class="layui-inline">
                <label class="layui-form-label">统计时间块</label>
                <select name="dimension" id="dimension" lay-filter="dimension">
                    <option value="01" selected="selected">按日</option>
                    <option value="02">按月</option>
                    <option value="03">按年</option>
                </select>
            </div>


            <div class="layui-inline" id="dateYear" style="display: none;">
                <label class="layui-form-label">交易年份</label>
                <input type="text" class="layui-input by-time" id="byYear" name="byYear" placeholder="请选择年份"
                    lay-filter="byYear()">
            </div>


            <div class="layui-inline" id="dateMonth" style="display: none;">
                <label class="layui-form-label">交易月份</label>
                <input type="text" class="layui-input by-time" id="byMonth" name="byMonth" placeholder="请选择月份"
                    lay-filter="byMonth()">
            </div>


            <div class="layui-inline" id="dateDay" style="display: inline-block;">
                <label class="layui-form-label">交易日期</label>
                <input type="text" class="layui-input by-time" id="byDate" name="byDate" placeholder="请选择日期">
            </div>

        </form>
        <script>
            layui.use(['laydate', 'table', 'layer'], function() {
                var table = layui.table,
                    layer = layui.layer,
                    form = layui.form,

                    laydate = layui.laydate;

                form.on('select(dimension)', function(data) {
                    var selected = data.value;
                    console.log("data.value: ", data.value);
                    if (selected == '01') { //按日
                        $('#dateDay').css('display', 'inline-block');
                        $('#dateYear').css('display', 'none');
                        $('#dateMonth').css('display', 'none');
                    } else if (selected == '02') { //按月
                        $('#dateDay').css('display', 'none');
                        $('#dateYear').css('display', 'none');
                        $('#dateMonth').css('display', 'inline-block');
                    } else if (selected == '03') { //按年
                        $('#dateDay').css('display', 'none');
                        $('#dateYear').css('display', 'inline-block');
                        $('#dateMonth').css('display', 'none');
                    }
                });

                function getDate() { //获取当前日期，返回一个当前日期的日期范围，如"2019-05-20 - 2019-05-20" ,后台会处理为"2019-05-20 00:00:00 - 2019-05-20 23:59:59"
                    var date = new Date();
                    var year = date.getFullYear();
                    var month = date.getMonth() + 1;
                    var day = date.getDate();
                    if (month < 10) {
                        month = "0" + month;
                    }
                    if (day < 10) {
                        day = "0" + day;
                    }
                    var nowDate = year + "-" + month + "-" + day;
                    var dateRange = nowDate + " - " + nowDate;
                    return dateRange;
                }

                laydate.render({
                    elem: '#byDate',
                    type: 'date',
                    range: true,
                    max: 0,
                    value: getDate(),
                    ready: function(date) {
                        $("#search").attr("disabled", false);
                        $("#download").attr("disabled", false);
                    },
                    done: function(value, date, endDate) {
                        var end = new Date(endDate.year, endDate.month - 1, endDate.date)
                            .getTime(); //获取毫秒
                        var start = new Date(date.year, date.month - 1, date.date).getTime();
                        var days = Math.floor((end - start) / (24 * 3600 * 1000)) + 1;
                        if (days > 31) {
                            layer.alert("抱歉！一次最多可查询31天的记录，请重新选择查询的时间范围，否则将无法进行查询和下载操作！");
                            $("#search").attr("disabled", true);
                            $("#download").attr("disabled", true);
                        }
                    }
                });

                var today = getNowFormatDate();
                var year = today.split("-")[0];
                var month = today.split("-")[0] + "-" + today.split("-")[1];

                laydate.render({
                    elem: '#byYear',
                    type: 'year',
                    value: year
                });

                laydate.render({
                    elem: '#byMonth',
                    type: 'month',
                    value: month
                });

                function getNowFormatDate() {
                    var date = new Date();
                    var seperator1 = "-";
                    var year = date.getFullYear();
                    var month = date.getMonth() + 1;
                    var strDate = date.getDate();
                    if (month >= 1 && month <= 9) {
                        month = "0" + month;
                    }
                    if (strDate >= 0 && strDate <= 9) {
                        strDate = "0" + strDate;
                    }
                    var currentdate = year + seperator1 + month + seperator1 + strDate;
                    return currentdate;
                }


                function getCurMonth() {
                    let dt = new Date();
                    dt.setDate(1);
                    dt.setMonth(dt.getMonth());
                    return (dt.toLocaleDateString().replace(/\//g, '-')).substring(0, 7);
                }

               console.log(getCurMonth());


                function getLastDate() {

                    let date = new Date('2020-08-04');
                    console.log(date);
                    date = new Date(  date.getYear(), date.getMonth(), 0  );
                    console.log(date.getDate() );
                    console.log(  );

                }

                getLastDate();


            });
        </script>
    </body>
</html>
